<template>
  <div class="commentWrapper">
    <h1 class="title">{{ hotelList.name }}</h1>
    <div class="all botton">
      <div class="star"><span>*</span>总体打分</div>
      <div class="grade">
        <el-rate
          v-model="score.all"
          text-color="#ff9900"
          show-score
          allow-half
          :show-text="true"
        >
        </el-rate>
      </div>
    </div>
    <div class="location botton">
      <div class="star"><span>*</span>位置打分</div>
      <div class="grade">
        <el-rate
          v-model="score.location"
          text-color="#ff9900"
          show-score
          allow-half
          :show-text="true"
        >
        </el-rate>
      </div>
    </div>
    <div class="service botton">
      <div class="star"><span>*</span>设施打分</div>
      <div class="grade">
        <el-rate
          v-model="score.fancility"
          text-color="#ff9900"
          show-score
          allow-half
          :show-text="true"
        >
        </el-rate>
      </div>
    </div>
    <div class="fancility botton">
      <div class="star"><span>*</span>服务打分</div>
      <div class="grade">
        <el-rate
          v-model="score.service"
          text-color="#ff9900"
          show-score
          allow-half
          :show-text="true"
        >
        </el-rate>
      </div>
    </div>
    <div class="content botton">
      <div class="star"><span>*</span>内容</div>
      <div class="textarea">
        <textarea
          v-model="content"
          rows="3"
          placeholder="100字以上,有机会评为优质点评哦!"
        ></textarea>
        <div class="words">内容不超过10000字 !</div>
      </div>
    </div>
    <div class="pics botton">
      <div class="star upImg">上传图片</div>
      <div class="picsUpload">
        <el-upload
          action="http://157.122.54.189:9095/upload"
          list-type="picture-card"
          :on-success="success"
          :on-remove="remove"
          name="files"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </div>
    </div>
    <div class="submit">
      <el-button type="primary" @click="onSubmit">提交</el-button>
    </div>
    <!-- 未登录弹出框 -->
    <div>
      <el-dialog
        title="请先登录或注册"
        width="30%"
        :visible.sync="dialogVisible"
      >
        <span>
          <Dialog @closeDialog="closeDialog" />
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      content: "",
      score: {
        all: 5,
        location: 5,
        service: 5,
        fancility: 5,
      },
      pics: [],
      hotelList: {},
      message: "",
    };
  },
  created() {
    this.$axios({
      url: "/hotels?id=" + this.$route.query.id,
    }).then((res) => {
      this.hotelList = res.data.data[0];
    });
  },
  methods: {
    // 关闭弹出框
    closeDialog() {
      this.dialogVisible = false;
    },
    onSubmit() {
      // 判断用户是否登录
      if (!this.$store.state.user.userInfo.token) {
        this.dialogVisible = true;
        return;
      }

      // 评论为空提交评论

      if (!this.content) {
        // 将之前的错误信息提示清空
        if (this.message) {
          this.message.close();
        }
        // 清空提示后再显示下次的错误提示;
        this.message = this.$message.warning("请输入评论内容!");

        return;
      }
      var data = {
        content: this.content,
        score: this.score,
        pics: this.pics,
        hotel: this.$route.query.id,
      };

      // 发送请求
      this.$axios({
        method: "post",
        url: "/comments",
        data: data,
        headers: {
          Authorization: "Bearer " + this.$store.state.user.userInfo.token,
        },
      }).then((res) => {
        if (res.data.message === "提交成功") {
          this.$message.success(res.data.message);
          // 跳转回酒店详情
          this.$router.push("/hotel/detail?id=" + this.$route.query.id);
        }
      });
    },
    success(res, file, fileList) {
      // console.log(fileList, 123);
      this.pics = fileList.map((img) => {
        return img.response[0];
      });
    },
    remove(file, fileList) {
      this.pics = fileList.map((img) => {
        return img.response[0];
      });
    },
  },
};
</script>

<style lang="less" scoped>
.commentWrapper {
  /deep/ .el-rate__text {
    color: #e4e4e4 !important;
  }
  background: #b0323273;
  //  url("https://b1-q.mafengwo.net/s11/M00/7D/D8/wKgBEFsY872AdeVPAAIR_MMohbg08.jpeg?imageMogr2%2Fthumbnail%2F%211360x760r%2Fgravity%2FCenter%2Fcrop%2F%211360x760%2Fquality%2F90")
  padding: 0 100px;
  margin: 0 auto;
  width: 800px;
  .title {
    font-size: 20px;
    font-weight: normal;
    margin: 10px 0;
    color: #333;
    margin-bottom: 20px;
  }
  .star {
    color: #c22121;
    font-size: 14px;
    margin-right: 10px;
    span {
      color: #f00;
    }
  }
  .all,
  .location,
  .service,
  .fancility {
    display: flex;
    margin: 10px 0px;
  }
  .content {
    display: flex;
    padding-left: 27px;
    .star {
      width: 37px;
      margin-right: 14px;
    }
    .textarea {
      width: 100%;
      textarea {
        width: 80%;
        height: 90px;
        border: none;
        background-color: #e4e4e4;
        outline: none;
        padding-left: 14px;
        padding-top: 14px;
        resize: none;
      }
      textarea::-webkit-input-placeholder {
        font-size: 16px;
      }
      .words {
        margin-top: 10px;
        margin-bottom: 14px;
        font-size: 14px;
        color: #888;
      }
    }
  }
  .pics {
    margin-top: 10px;
    padding-left: 5px;
    display: flex;
    .picsUpload {
      margin-left: 5px;
    }
    .upImg {
      line-height: 140px;
    }
  }
  .submit {
    margin: 24px 0;
    margin-left: 76px;
    /deep/ .el-button {
      padding: 10px 34px;
    }
  }
  .botton {
    padding-bottom: 10px;
    border-bottom: 1px solid #e4e4e4;
  }
}
</style>